import style from './index.module.scss';
import store from "../../../store";
import {observer} from "mobx-react";
import {Button, Form, Select, DatePicker, Modal, Input, Radio, Space, Table} from 'antd';
import React, {useState} from 'react';
import {useNavigate} from "react-router-dom";

// import market from "../../../store/Market/market";


const {Option} = Select;

const MarketingQuery = () => {
    const [form] = Form.useForm();

    const submit =() => {
        store.market.resetlist()
        const a= form.getFieldsValue(true)
        console.log("111",a) /*查询表单数据*/
        let chaxun={}
        let aaa=[]
        for(let key in a ){
            if(a[key]!="全部" && a[key]!=""){
                chaxun[key]=a[key].trim()
            }
        }
        console.log('查询',chaxun)
        // console.log()
        if(JSON.stringify(chaxun)!="{}"){
            console.log(111)
            store.market.count.forEach((v,i)=>{
                console.log(v)
                for(let key in v){
                    // console.log("00",v[key])
                    if(v[key]==chaxun[key] && aaa.indexOf(v)==-1){
                        aaa.push(v)
                    }
                }
            })
            console.log('aaa',aaa)
          store.market.setMemberTableList(aaa)
        }

    };
    //调整积分的模态框
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        console.log('模态框确认')
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        console.log('模态框取消')
        setIsModalOpen(false);
    };
    const goAIpage = () => {
        console.log('调整积分');
        setIsModalOpen(true)
    }
    const goAddMarketing=()=>{
        navigate('/home/MemberMarketing/addMarketing')
    }
    const navigate = useNavigate();
    const onReset = () => {
        navigate(-1)
    };
    //订金金额单项选择
    const [value, setValue] = useState(1);
    const onChange = (e) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    //选择内容模态框
    const [isContentOpen, setisContentOpen] = useState(false);
    // ----------------------选择内容模态框------------
    const chooseContent = () => {
        console.log("选择内容");
        setisContentOpen(true);
    }
    const contentOk = () => {
        console.log("模态框确认");
        setisContentOpen(false);
    };
    const contentCancel = () => {
        console.log("取消");
        setisContentOpen(false);
    };
    const [contentselectionType] = useState('checkbox');
    const contentColumns = [
        {
            title: '商品名称',//表格列名
            dataIndex: 'goodsName',//对应数据字段
            key: 'goodsName',//该列的唯一值
        },
        {
            title: '所属App',//表格列名
            dataIndex: 'belongApp',//对应数据字段
            key: 'belongApp',//该列的唯一值
        },
        {
            title: '频道',//表格列名
            dataIndex: 'channel',//对应数据字段
            key: 'channel',//该列的唯一值
        },
        {
            title: '价格',//表格列名
            dataIndex: 'price',//对应数据字段
            key: 'price',//该列的唯一值
        },
    ]
    // ----------------------------选择内容模态框--条件查询表单
    const [contentQueryform] = Form.useForm();
    const contentFinish = (values) => {
        console.log('查询 ', values);
    };
    const contentQuery = () => {
        const a = contentQueryform.getFieldsValue(true)
        console.log(a)
    };
    // 编辑表单提交
    const onFinish = (values) => {
        console.log('Success:', values);
        submit(values)
    };
    // 编辑表单提交失败
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (<div>
        <Form
            name="basic"
            autoComplete="off"
            className={style.formM}
            layout={"inline"}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            form={form}
        >
            <Form.Item
                label="状态"
                name="status"
                style={{width: '150px'}}
            >
                <Select
                    allowClear
                    style={{width: '100px'}}
                >
                    <Option value="全部">全部</Option>
                    <Option value="推送中">推送中</Option>
                    <Option value="已完成">已完成</Option>
                    <Option value="待执行">待执行</Option>
                </Select>
            </Form.Item>
            <Form.Item
                label="营销类型"
                name="marketingType"
            >
                <Select
                    allowClear
                    style={{width: '150px'}}
                >
                    <Option value="全部">全部</Option>
                    <Option value="推送优惠券">推送优惠券</Option>
                    <Option value="调整积分">调整积分</Option>
                </Select>
            </Form.Item>
            <Button htmlType="submit" onClick={submit} className={style.search}>搜索</Button>
        </Form>
        <br/>
        <Button onClick={() => goAddMarketing()} type='primary' className={style.search}>新增</Button>
        {/*<Button onClick={() => goAIpage()} type='primary' className={style.search}*/}
        {/*        style={{marginLeft: '10px'}}>调整积分</Button>*/}
        <br/>
        <div className={style.space}/>

        {/* 调整积分的模态框*/}
        <Modal title="调整积分"
               className={style.modelHeader}
               open={isModalOpen}
               onOk={handleOk}
               onCancel={handleCancel}
               okText="保存"
               cancelText="取消">
            <Form
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
            >
                <Form.Item
                    label="选择商品"
                    rules={[{required: true, message: '请选择商品', whitespace: true}]}
                >
                    <Form.Item name="goods" noStyle>
                        <Input className={'inputBox'}/>
                    </Form.Item>

                    <Button style={{marginLeft: "20px"}} onClick={chooseContent}>浏览</Button>

                </Form.Item>
                <Form.Item label="订金金额" name="depositAmount">
                    <Radio.Group onChange={onChange} value={value}>
                        <Radio value={1}>增加</Radio>
                        <Radio value={2}>减少</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item label="使用说明" name="instruction">
                    <Input className={'inputBox'}/>
                </Form.Item>
            </Form>
        </Modal>
        {/*模态框板块*/}
        <Modal title="选择内容"
               open={isContentOpen}
               onOk={contentOk}
               onCancel={contentCancel}
               okText="保存"
               cancelText="取消"
               width={650}>
            <Form
                form={contentQueryform}
                name='contentform'
                onFinish={contentFinish}
                layout="inline">
                <Form.Item
                    label="所属App"
                    name="App"
                >
                    <Select style={{width: 100}}>
                        <Option value='小黑早教'>小黑早教</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="频道"
                    name="channel">
                    <Select style={{width: 100}}>
                        <Option value=''>全部</Option>
                        <Option value='国学'>国学</Option>
                        <Option value='英语'>英语</Option>
                        <Option value='逻辑'>逻辑</Option>
                        <Option value='美术'>美术</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label="商品名称"
                    name="contentName">
                    <Input placeholder='商品名称' style={{width: 100}}/>
                </Form.Item>

                <Space size={'large'}>
                    <Button type='primary' onClick={submit} className='btnStyle'>搜索</Button>
                </Space>

            </Form>
            <br/>
            <Table
                rowSelection={{type: contentselectionType,}}
                columns={contentColumns}
                dataSource={store.coupon.tablePage}
                bordered
                pagination={false}
                scroll={{
                    y: 240,
                }}
            />
        </Modal>
    </div>)
}
export default observer(MarketingQuery)